<template>
	<view class="scenic">
		<view class="scenic_title">
			{{title}}
		</view>
		<view class="scenic_pic">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in img" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="widthFix" lazy-load="true"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="scenic_content">
			{{brief}}
		</view>
		<view class="hotScenicProduct">
			<view class="hotScenicProduct_title" >
				<vanIcon name="fire" color="red" />热门发现
			</view>
			<view class="hotScenicProduct_keyword">
				<template v-for="(item,index) in keyWords">
					<searchResultItem :searchKeys="item" :key="index"></searchResultItem>
				</template>
				<image src="../../../static/空.png" v-if="!keyWords.length" mode="widthFix" class="kong"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import searchResultItem from '@/packageA/components/search/searchResultItem.vue'
	import vanIcon from '@/wxcomponents/vant/@vant/icon'
	export default {
		components:{
			searchResultItem,vanIcon
		},
		data() {
			return {
				keyWords:['潮州柑','潮州工夫茶'],
				title:'湘桥春涨',
				brief:'广济桥，位于韩江中游，是广东东部同福建、江西的必由之路，韩江又是粤东交通运输的动脉，所以，广济桥一建成便成了货物集散和转运的重要枢纽，由于桥上店铺林立，热闹非凡，所以有“到了湘桥问湘桥” 的佳话。这座大桥每一个桥墩距今都有几百年的历史，从宋代建成第一个桥墩到形成“十八梭船二十四洲”的格局，前后共延续了300多年。在古代生产力落后的情况下，在大江上建造这样的大桥，其难度是超乎人们想象的，故潮州民间便流传许多“仙佛造桥”的传说。',
				img:['https://img2.baidu.com/it/u=1520542812,2480312096&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500','https://img1.baidu.com/it/u=3382664212,3398142444&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=461','https://img2.baidu.com/it/u=1876636131,552462251&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=276']
			};
		},
		onLoad(options){
			console.log(options)
			const id = options.id
			const that = this
			wx.cloud.callFunction({
				name:'getScenicDetail',
				data:{
					id
				},
				success(res){
					console.log(...res.result.data)
					let result = res.result.data[0]
					
					that.title = result.scenicName
					that.brief = result.scenicContext
					that.img = [...result.scenicImg]
					that.keyWords = [...result.scenicKeyWord]
					
					uni.setNavigationBarTitle({
					    title: result.scenicName
					})
				}
			})
		}
	}
</script>

<style lang="less">
	.swiper-item{
		position: relative;
		image{
			margin: 0 auto;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.scenic{
		width: 100%;
		box-sizing: border-box;
		padding: 1rem;
		.scenic_title{
			font-size: 1.5rem;
			margin: 1rem 0;
			padding: .2rem;
			border-top: 2px solid green;
		}
		.scenic_content{
			margin: 1rem 0;
			padding: .5rem;
			border-top: 2px solid green;
			color: #666;
		}
		.hotScenicProduct_keyword{
			box-sizing: border-box;
			padding: .9rem;
			display: flex;
			justify-content: start;
			align-items: center;
			flex-flow: row wrap; 
			.kong{
				display: block;
				margin: 0 auto;
				width: 5rem;
			}
		}
		.hotScenicProduct_title{
			margin: .5rem 0;
			padding: .2rem;
			font-weight: 600;
		}
	}
	
	swiper{
		width: 100%;
		height: 18rem;
	}
</style>
